@charset "utf-8";
//@import "common/reset";

$fontsize:40;
@function r($px){
    @return $px/$fontsize * 1rem;
}
            html,body{
                width: 100%;
                height: 100%;
            }
            .web{
                width: 100%;
                height: 100%;
                position: relative;
            }
            header{
                width: 100%;
                height: r(150);
                background: white;
                position: absolute;
                top:0;
            }
            header>.logo{
                width: r(123);
                height: r(123);
                float: left;
                margin-left: r(20);
                margin-top: r(16);
            }
            header>.logo img{
                width: 100%;
                height: 100%;
            }
            header .searchBar{
                width: r(274);
                height: r(53);
                border: 1px solid #ff9344;
                border-radius: r(25);
                padding: 0 r(7);
                box-sizing: border-box;
                margin: 0 auto;
                margin-top: r(50);
                position: relative;
            }
            header .searchBar input{
                width: r(204);
                height: 100%;
                border: none;
                vertical-align: top;
                font-size: r(24);
                border-radius: r(25);
                outline: none;
                text-indent: r(12);
            }
            header .searchBar i{
                font-size: r(34);
                color: #ff9344;
                position: absolute;
                top: r(6);
                right: r(14);
            }
            header .selecBar{
                width: r(160);
                height: r(54);
                border: r(1) solid #ff9344;
                float: right;
                margin-right: r(22);
                margin-top: r(50);
                background: url(../img/icon-1.png) no-repeat right;
                background-size:r(30) r(16);
            }
            header .selecBar select{
                padding: 0 r(4);
                border: none;
                width: 100%;
                height: 100%;
                background-color: transparent;
                border: none;
                outline: none;
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                vertical-align: top;
                text-indent: r(14);
                font-size: r(27);
            }
            
            section{
                width: 100%;
//              background: pink;
                position: absolute;
                top: r(150);
                bottom: r(68);
                overflow-y: scroll;
                -webkit-overflow-scrolling: touch;/*移动端一定要加的*/
               .carou{
                   height: r(287);
//                 img{
//                     height: 100%;
//                     width: 100%;
//                 }
                   .slideshow-image{
//                     height: 100%;
                       width: 100%;
                   }
               }
               .biao_ti{
                   width: 100%;
                   height: r(93);
                   background: white;
                   .left_bt{
                       width: r(200);
                       height: r(54);
                       margin-top: r(34);
                       margin-left: r(21);
                       img{
                           width: r(56);
                           height: r(54);
                           vertical-align: middle;
                       }
                       span{
                           font-size: r(29);
                           vertical-align: middle;
                       }
                   }
                   .love{
                       img{
                           margin-right: r(8);
                       }
                   }
                   .right_more{
                       width: r(86);
                       height: r(24);
                       margin-top: r(50);
                       margin-right: r(11);
                       box-sizing: border-box;
                       span{
                           font-size: r(24);
                           a{
                               color: black;
                           }
                       }
                       i{
                           color: #FF9344;
                           font-size: r(26);
                       }
                   }
               }
                .you_hui{
                    width: 80%;
                    margin: 0 auto;
                    ul{
                        li{
                            width: 100%;
                            a{
                                display: inline-block;
                                width: 40%;
                                img{
//                                  width: px(241px);
//                                  height: px(94px);
                                    width: 100%;
                                }
                            }
                        }
                        .pic_1{
                            a{
                                margin-bottom: r(30);
                                margin-top: r(12);
                            }
                        }
                    }
                }
                .menu{
                    width: 100%;
                    .picture{
                        width: 100%;
                        height: 100%;
                        a{
//                          width:20%;
                            img{
                                width: r(211);
                                height: r(164);
                                display: inline-block;
                                padding-left: r(20);
                                padding-top: r(26);
                                padding-right: r(24);
                            }
                        }
                        .menu_ul{
                            width: 60%;
                            display: inline-block;
                            padding-top: r(48);
                            >li:first-child{
                                font-size: r(30);
                                .ju_li{
                                    font-size: r(18);
                                }
                            }
                            >li:nth-child(2){
                                font-size: r(23);
                                line-height: r(48);
                            }
                            >li:last-child{
                                font-size: r(26);
                                color: #FF9344;
                                .shu_liang{
                                    font-size: r(22);
                                    color: black;
                                }
                            }
                        }
                    }
                }
            }
            
            footer{
                width: 100%;
                height: r(135);
                background: white;
                position: absolute;
                bottom: 0;
                a{
                        color: #000000;
                    }
                ul li{
                    width: 25%;
                    height: 100%;
                    float: left;
                    text-align: center;
                    padding-top: r(16);
                    box-sizing: border-box;
                    .iconfont{
                        color: transparent;
                        font-size: r(60);
                        -webkit-text-stroke: r(2) #FF9344;
                        
                    }
                    .active{
                        color: #FF9344;
                    }
                    p{
                        font-size: r(26);
                    }
                    &:hover .iconfont{
                        color: #FF9344;
                    }
                }
            }
            
//分类部分
.header{
    width: 100%;
    height: r(124);
    .back{
        width: r(123);
        height: r(57);
        margin-left: r(22);
        margin-top: r(48);
        a{
            display: block;
            width: 100%;
            height: 100%;
            border: r(2) solid #FF9344;
            border-radius: r(20);
            text-align: center;
            line-height: r(56);
            color: black;
            font-size: r(21);
        }
    }
    .fen-lei{
        width: r(80);
        margin: 0 auto;
        color: black;
        font-size: r(26);
        margin-top: r(62);
    }
}
.section{
    top: r(122);
    .lun_bo{
        width: 100%;
        height: r(237);
        margin: 0 auto;
        ul{
            margin: 0 auto;
            >li{
                float: left;
                width: 25%;
                text-align: center;
                box-sizing: border-box;
                a{  
                    display: inline-block;
                    width: r(149);
                    height: r(149);
                    img{
                        width: 100%;
                        height: 100%;
                        margin: 0 auto;
                    }
                    p{
                        font-size: r(26);
                        color: black;
                    }
                } 
            }  
            .swiper-slide {
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
            } 
        }
    }
    .fl_type{
        width: 100%;
        height: r(270);
        .food{
                width: 100%;
                height: r(65);
                .left_food{
                    margin-top: r(5);
                }
                img{
                    width: r(54);
                    height: r(42);
                    vertical-align: middle;
            }
        }
        .sport{
            img{
                width: r(47);
                height: r(58);
            }
        }
        .movie{
            img{
                width: r(53);
                height: r(52);
            }
        }
        .food_pic{
            height: r(206);
            .food_pic_ul{
                li{
                    padding-top: r(37);
                    a{
                        width: r(133);
                        height: r(133);
                    }
                }
            }
        }
    }
}

//“我的”页面
header{
    .xin_feng{
        width: r(62);
        height: r(56);
        margin-right: r(22);
        margin-top: r(48);
        img{
            width: 100%;
            height: 100%;
        }
    }
}
section{
    .login{
        width: 100%;
        .tou_xiang{
            float: left;
            margin-left: r(23);
            img{
                width: r(170);
                height: r(170);
                display: inline-block;
//              vertical-align: middle;
                float: left;
            }
            .login_onclick{
                margin-left: r(26);
                a{
                    font-size: r(29); 
                    color: black;
                    line-height: r(99);
                    font-weight: bold;
                }
                p{
                    font-size: r(26);
                    color: #9d9d9d;
                }
            }
        }
        .fu_hao{
            width: r(41);
            height: r(46);
            display: inline-block;
            line-height: r(177);
            margin-right: r(23);
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    .my_lanmu{
        width: 100%;
        height: r(151);
        margin: r(26) 0 r(34) r(23);
        a{
            width: 32%;
            height: 100%;
            display: inline-block;
                img{
                width: r(195);
                height: 100%;
            }
        }
    }
    .my_money{
        height: r(74);
        margin-bottom: r(25);
        .money_icon{
            margin-top: 0;
            width: r(210);
            img{
                width: r(57);
                height: r(74);
                margin-right: r(34);
            }
            span{
                font-size: r(26);
            }
        }
        .my_more{
            margin-top: 0;
            line-height: r(58);
        }
    }
    .fond_friend{
        height: r(58);
        .money_icon{
            img{
                width: r(94);
                height: r(58);
                margin-right: r(0);
            }
        }
        .my_more{
            line-height: r(50);
        }
    }
    .my_foot{
        height: r(59);
        .foot_icon{
            img{
                width: r(59);
                height: r(59);
                margin-right: r(34);
            }
        }
//      .my_more{
//          line-height: r(50);
//      }
    }
    .my_she_zhi{
        height: r(79);
        margin-top: r(79);
        .left_bt{
            img{
                width: r(78);
                height: r(79);
                margin-right: r(14);
            }
        }
    }
    .my_lian_xi{
        height: r(59);
        .left_bt{
            img{
                width: r(84);
                height: r(59);
                margin-right:r(12);
            }
        }
    }
    .login_btn{
        width: 100%;
        button{
            width: r(147);
            height: r(74);
            border: r(1) solid #FF9344;
            border-radius: r(74);
            background: #FF9344;
            color: white;
            margin-top: r(11);
            &:first-child{
                margin-left: r(110);
            }
            &:last-child{
                margin-right: r(110);
            }
        }
    }
}

//发现的页面
.find_header{
    height: r(440);
    .sousuo{
        width: r(130);
        margin-top: r(34);
    }
    .sou_suo_lanmu{
        width: 100%;
        margin-top: r(16);
        ul{
            width:69%;
            margin: 0 auto;
            li{
                width: r(124);
                height: r(63);
                background: #dcdcdc;
                text-align: center;
                float: left;
                margin-right: r(6);
                margin-bottom: r(6);
                &:last-child{
                    margin-right: 0;
                }
                a{
                    font-size: r(20);
                    color: #ababab;
                    line-height: r(63);
                }
            }
        }
        ul:last-child{li{
            margin-bottom: 0;
        }}
    }
}
.find_section{
    top: r(440);
    .re_men{
        height: r(120);
        padding-left: r(16);
        .re_men_ss{
            img{
                width: r(32);
                height: r(47);
                vertical-align: middle;
                margin-right: r(24);
                
            }
            span{
                font-size: r(30);
            }
        }
        .right_more{
            line-height: r(30);
        }
    }
    .search_picture{
        width: 95%;
        height: r(354);
        margin: 0 auto;
        .big_img{
            display: inline-block;
            vertical-align: top;
            a{
                width: r(279);
                height: r(352);
                display: inline-block;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
        }
        .right_img{
            display: inline-block;
            .top_img{
                width: r(420);
                height: r(147);
                display: block;
                margin-bottom: r(10);
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .bottom_img{
                width: r(195);
                height: r(197);
                display: inline-block;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .bottom_img2{
                width: r(211);
                height: r(197);
            }
        }
    }
    .recommen{
        height: r(220);
        a{
            width: 31%;
            height: 100%;
            img{
                width: r(200);
                height: 100%;
            }
        }
    }
}



//首页轮播
.slideshow-image {
  position: absolute;
  width: 100%;
  height: r(287);
  background: no-repeat 50% 50%;
  background-size: cover;
  -webkit-animation-name: kenburns;
  animation-name: kenburns;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
  -webkit-animation-duration: 16s;
  animation-duration: 16s;
  opacity: 1;   
  -webkit-transform: scale(1.2);
  transform: scale(1.2); }

.slideshow-image:nth-child(1) {
  -webkit-animation-name: kenburns-1;
  animation-name: kenburns-1;
  z-index: 3; }

.slideshow-image:nth-child(2) {
  -webkit-animation-name: kenburns-2;
  animation-name: kenburns-2;
  z-index: 2; }

.slideshow-image:nth-child(3) {
  -webkit-animation-name: kenburns-3;
  animation-name: kenburns-3;
  z-index: 1; }

.slideshow-image:nth-child(4) {
  -webkit-animation-name: kenburns-4;
  animation-name: kenburns-4;
  z-index: 0; }

@keyframes kenburns-1 {
  0% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  1.5625% {
    opacity: 1; }
  23.4375% {
    opacity: 1; }
  26.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  98.4375% {
    opacity: 0;
    -webkit-transform: scale(1.21176);
    transform: scale(1.21176); }
  100% {
    opacity: 1; } }
@keyframes kenburns-2 {
  23.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  26.5625% {
    opacity: 1; }
  48.4375% {
    opacity: 1; }
  51.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2); } }
@keyframes kenburns-3 {
  48.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  51.5625% {
    opacity: 1; }
  73.4375% {
    opacity: 1; }
  76.5625% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1); }
  100% {
    opacity: 0;
    -webkit-transform: scale(1.2);
    transform: scale(1.2); } }
@-webkit-keyframes kenburns-4 {
  73.4375% {
    opacity: 1;
    -webkit-transform: scale(1.2);
    transform: scale(1.2); }
  76.5625% {
    opacity: 1; }
  98.4375% {
    opacity: 1; }
  100% {
    opacity: 0;
    -webkit-transform: scale(1);
    transform: scale(1); } }